<template>
  <div class="vuu-page">
    <vuu-header></vuu-header>
    <div class="vuu-content-t">
      <vuu-pull ref="vuuPull" :id="'vuu-page-4'" :options="pullOptions" v-on:loadTop="loadTop"  v-on:loadBottom="loadBottom">
        <div class="vuu-small-title">请尝试上拉和下拉刷新</div>
        <template v-for="(item , index) in paneList">
          <vuu-pane :options="item"></vuu-pane>
        </template>
      </vuu-pull>
    </div>
  </div>
</template>
<script>
  import nav from '../components/navBar/nav-bar.vue'
  import pane from '../components/pane/pane.vue'
  import vuuPull from '../../src/pull.vue'
  let paneList = [
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    },
    {
      w1: '上拉和下拉刷新',
      w2: '上拉和下拉刷新'
    }
  ]

  export default{
    name: 'page5',
    data(){
      return {
        paneList,
        pullOptions: {
          isBottomRefresh:true,
          isTopRefresh:true,
        }
      }
    },
    methods: {
      'loadBottom'(){
        let vm = this
        setTimeout(function () {
          vm.paneList.push({
            w1: '这是刷新的一条数据',
            w2: '太棒了！！请继续'
          })
          if (vm.$refs.vuuPull.closeLoadBottom) {
            vm.$refs.vuuPull.closeLoadBottom()
          }
        }, 1500)
      },
      'loadTop'(){
        let vm = this
        setTimeout(function () {
          vm.paneList.unshift({
            w1: '这是下拉的一条数据',
            w2: '太棒了！！请继续下拉'
          })
          if (vm.$refs.vuuPull.closeLoadTop) {
            vm.$refs.vuuPull.closeLoadTop()
          }
        }, 1500)
      }
    },
    components: {
      'vuu-pull': vuuPull,
      'vuu-header': nav,
      'vuu-pane': pane
    }
  }
</script>
<style>

</style>
